import React from "react";
import { TabBar } from "antd-mobile";
import { withRouter } from "react-router-dom";
class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      fullScreen: true
    };
  }

  render() {
    const isSelete = this.props.location.pathname;
    return (
      <div
        style={
          this.state.fullScreen
            ? { position: "fixed", height: "100%", width: "100%", top: 0 }
            : { height: "auto" }
        }
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          {/* 首页 */}
          <TabBar.Item
            title="首页"
            key="home"
            icon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat"
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat"
                }}
              />
            }
            selected={isSelete === "/home"}
            badge={1}
            onPress={() => {
              // 路由的history跳转
              this.props.history.push("/home");
            }}
            data-seed="logId"
          ></TabBar.Item>

          {/* 购物车 */}
          <TabBar.Item
            icon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat"
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat"
                }}
              />
            }
            title="购物车"
            key="buy"
            // badge={"new"}
            selected={isSelete === "/buy"}
            onPress={() => {
              // 路由的history跳转
              this.props.history.push("/buy");
            }}
            data-seed="logId1"
          ></TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(TabBarExample);
